
import React, {Component} from 'react';
import { ImageBackground, Text, View, Image, 
  TouchableOpacity
} from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
import { setUserData } from '@/actions/user'
import styles from './index.style.js'
import {jumpPage} from '@/util/common'
import DeviceStorage from '@/util/DeviceStorage'
export default class TopView extends Component{
  _goUserInfo(){
    jumpPage(this.props.navigation, 'userInfo')
  }
  _setAvatar(){
    ImagePicker.openPicker({
      width: 300,
      height: 300,
      cropping: false
    }).then(image => {
      this._handleImage(image);
    });

  }
  _handleImage(image){
    let user = this.props.user
    user.avatar = image.path
    user.nickname = '阿斯蒂芬'
    DeviceStorage.save('user',JSON.stringify(user))
    this.props.dispatch(setUserData(user))
  }
  render(){
    let user = this.props.userInfo
    console.log('-- top user--',user)
    let nickname = user.nickname ? user.nickname : '未设置'
    let avatar = user.avatar ? {uri: user.avatar} : require('@/images/mine/avatar.png')
    return(
      <View style={styles.bgWrap}>
        <ImageBackground style={styles.bg} source={require("@/images/mine/bg.png")}>
          <View style={styles.one}>
            <TouchableOpacity activeOpacity={0.7} onPress={()=>this._setAvatar()}>
              <Image style={styles.headIcon} source={avatar}></Image>
            </TouchableOpacity>
            <Text style={styles.nickname}>{nickname}</Text>
          </View>
        </ImageBackground>
      </View>
    )
  }
}